<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My Featured Properties</title>
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            -webkit-overflow-scrolling: touch; 
        </style>
        <style>
            .myButton3 {
                background-color:#44c767;
                -moz-border-radius:28px;
                -webkit-border-radius:28px;
                border-radius:28px;
                border:1px solid #44c767;
                display:inline-block;
                cursor:pointer;
                color:#ffffff;
                font-family: tahoma, avant, arial;
                font-size:17px;
                padding:8px 33px;
                text-decoration:none;
                text-shadow:0px 1px 0px #44c767;
            }
            .myButton3:hover {
                background-color:#44c767;
                color:#ffffff;
            }
            .myButton3:active {
                position:relative;
                top:1px;
                color:#ffffff;
            }
            .myButton3:visited {
                color:#ffffff;
            }
        </style>
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/token/jquery.tokeninput.js"></script>  
        <script type="text/javascript" src="${model.props.appPath}/js/block/jquery.blockUI.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#table-listings tr:even").css("background-color", "#f3f3f3");
            });
        </script>
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: avant, Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            <div style="width: 100%; text-align: left; font-family: avant, Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1020px; margin-top: 10px; margin: 0 auto;">

                    <br>
                    <br> 
                    <span style="font-size: 30px; font-weight: bold;">&nbsp;Choose a property you want to feature:</span> 

                    <hr>
                    
                    <br>
                    
                    
                    <div style="font-size: 15px; padding: 3px; margin-left: 2%;">&#10004;&nbsp;Appear on top spot for ALL PAGES of search results of chosen city and category (long term or short term rentals).</div>
                    
                    <div style="font-size: 15px; padding: 3px; margin-left: 2%;">&#10004;&nbsp;You get to control which city and category you want your property to be featured.</div>
                    
                    <div style="font-size: 15px; padding: 3px; margin-left: 2%;">&#10004;&nbsp;Your property will also display with a highlight to stand out among the rest.</div>
                    
                    <div style=" font-size: 15px; padding: 3px; margin-left: 2%;">&#10004;&nbsp;Get these huge benefits for one week for only <b>Php 97</b></div>
                    
                    <br><br>
                    
                    <table id="table-listings" cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; font-size: 15px; padding: 5px;">
                        <tr>
                            <th width="118px;" style="height: 50px;"></th>
                            <th></th>
                            <th align="center">Impressions <img src="${model.props.appPath}/img/whats-this.png" title="Impressions show the number of times your posting appeared on the search results." style="position:relative; top:3px; left:3px;"/></th>
                            <th align="center">Views <img src="${model.props.appPath}/img/whats-this.png" title="Views show how many times your posting has been viewed." style="position:relative; top:3px; left:3px;"/></th>
                            <!--
                            <th align="center">City <img src="${model.props.appPath}/img/whats-this.png" title="This shows on what city search page your property is featured in." style="position:relative; top:3px; left:3px;"/></th>
                            <th align="center">Term <img src="${model.props.appPath}/img/whats-this.png" title="This shows on what if your property is featured on the long term section or the short term section." style="position:relative; top:3px; left:3px;"/></th>
                            <th align="center">Duration <img src="${model.props.appPath}/img/whats-this.png" title="This tells the dates when your property will appear on the featured spot." style="position:relative; top:3px; left:3px;"/></th>
                            -->
                            <th align="center">Action <img src="${model.props.appPath}/img/whats-this.png" title="Use this to feature your property." style="position:relative; top:3px; left:3px;"/></th>                            
                        </tr>
                        <c:if test="${fn:length(model.listings) <= 0}">
                            <tr>
                                <td colspan="5" align="center">
                                    <br>
                                    You don't have properties to feature yet. <a href="${model.props.appPath}/post" style="color: #369;">Click here to start posting</a>.
                                </td>
                            </tr>
                        </c:if>
                        <c:forEach items="${model.listings}" var="listing">
                            <tr> 
                                <td>
                                    <a href="featured.htm?a=23&id=${listing.id}" style="color: #369;">
                                        <img src="${model.props.rootPath}/uploads/img/002-${listing.primaryPhoto.filename}" style="height: 60px; width: 116px;"/>
                                    </a>
                                </td>
                                <td>
                                    <table>
                                        <tr></tr>
                                        <tr style="background-color: transparent;">
                                            <td><a href="featured.htm?a=23&id=${listing.id}" style="color: #000; font-size: 15px;"><div style="max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${listing.title}</div></a></td>
                                        </tr>
                                    </table>                                    
                                </td>

                                <td align="center" width="140px">                                    
                                    ${listing.impressions}
                                </td>

                                <td align="center" width="140px">                                    
                                    ${listing.views}
                                </td>

                                <td align="center" width="250px">
                                    <a href="featured.htm?a=23&id=${listing.id}" class="myButton3">Feature this property</a>


                                    <!--
                                    <c:if test="${listing.available}">
                                        <a href="listing.htm?a=3002&id=${listing.id}" style="color: #F00; position: relative; top: 8px;" title=" Mark listing as NOT available to rent or if there is a tenant already. ">
                                            &nbsp;<img src="${model.props.appPath}/img/btn-mark-not-available.jpg" width="200px" height="30px;"/>&nbsp;
                                        </a>
                                    </c:if>
                                    <c:if test="${!listing.available}">
                                        <a href="listing.htm?a=3001&id=${listing.id}" style="color: #0F0; position: relative; top: 8px;" title=" Mark listing as available to rent. ">
                                            &nbsp;<img src="${model.props.appPath}/img/btn-mark-available.jpg" width="200px" height="30px;"/>&nbsp; 
                                        </a>
                                            
                                    </c:if>
                                    -->
                                </td>
                                <td>

                                </td>
                            </tr>
                            <tr>
                                <td colspan="7"><br></td>
                            </tr>
                        </c:forEach>
                    </table>

                    <br><br>

                </div>

                <br><br>                

            </div>

            <%@include file="footer.jsp" %>

        </div>

    </body>

</html>
